<template>
  <div class="w_h_100 ">
    <div class="box">
      <div class="inlet">系统管理 > 字典管理 > <span class="size">数据字典</span></div>
      <myform :fields="fields" :model="values" class="m_t_10" :options="options">
        <template v-slot:button>
          <el-button @click="resetting">重置</el-button>
          <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
        </template>
      </myform>
    </div>
    <div class="mytable m_t_10 ">
      <div class="d_f j_c_s_b a_i_c">
        <h4>字典类型列表</h4>
        <el-button type="primary" :icon="Plus" @click="addDict" v-hasPerm="'addDictionary'">新增字典类型</el-button>
      </div>
      <mytable :fields="tableFields" @screenChange="screenChange" width="100" ref="tableRef" :values="values"
        api="dictListByPage" class="m_t_10" :isSelection="false">
        <template v-slot:deleted="{ row }">{{ row.deleted == 0 ? '已启用' : '已停用' }}</template>
        <template v-slot:name="{ row }"><span class="name" @click="child(row.value)">{{ row.name }}</span></template>
        <template v-slot:operation="{ row }">
          <div class="d_f j_c_s_b">
            <span class="edit" @click="edit(row)" v-hasPerm="'editDictionary'">编辑</span>
            <span class="success" @click="modifyState(row.id, 0, '是否启用当前字典?')" v-if="row.deleted == 1" v-hasPerm="'statusDictionary'">启用</span>
            <span class="error" @click="modifyState(row.id, 1, '是否停用当前字典?')" v-else v-hasPerm="'statusDictionary'">停用</span>
          </div>
        </template>
      </mytable>
    </div>
    <el-drawer v-model="show" :title="title" size="500px" direction="rtl" :before-close="handleClose">
      <div class="dictionary">
        <myform :fields="addFields" ref="ruleFrom" :model="model" :inline="false" labelPosition="top" :rules="rules"
          class="m_t_16"></myform>
      </div>
      <div class="d_f j_c_c">
        <el-button type="primary" @click="save" v-myRepeat>保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script lang='ts'>
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'
import { dictionaryType } from '../../../type/system'
import { Search, Plus } from '@element-plus/icons-vue'
import { copy, objectMatching } from '../../../utils/date'
import { Message } from '../../../utils/resetMessage'
import { dictTypeAdd, dictTypeUpdate, dictTypeStatus } from '../../../api/system/dictionary'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const values = {
  name: '',
  deleted: '',
  orderBy: '',
  orderItemList:[
    {
      column:'',
      asc:false
    }
  ],
}
const model = {
  name: '',
  value: '',
  remark: '',
  id: 0,
}
export default defineComponent({
  name: '',
  setup() {
    const data: dictionaryType = reactive({
      fields: [
        {
          label: "字典类型名称",
          prop: 'name',
          placeholder: '请输入',
          type: 'input',
          labelWidth: '96px'
        },
        {
          label: "字典状态",
          prop: 'deleted',
          placeholder: '请选择',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          prop: 'button'
        }
      ],
      values: copy(values),
      model: copy(model),
      options: {
        deleted: [
          {
            name: '已启用',
            id: '0',
          },
          {
            name: '已停用',
            id: '1',
          },

        ],
      },
      tableFields: [
        {
          label: '类型名称',
          prop: 'name',
        },
        {
          label: '类型值',
          prop: 'value',
        },
        {
          label: '状态',
          prop: 'deleted',
          screen: true,
          isOrderBy: false
        },
        {
          label: '备注',
          prop: 'remark',
        },
        {
          label: '创建时间',
          prop: 'createdTime',
        },

      ],
      show: false,
      title: '新增字典类型',
      addFields: [
        {
          label: '类型名称',
          type: 'input',
          placeholder: '请输入',
          prop: 'name',
          disabled: false,
        },
        {
          label: '类型值',
          type: 'input',
          placeholder: '请输入',
          prop: 'value',
          disabled: false,
        },
        {
          label: '备注',
          type: 'textarea',
          placeholder: '请输入',
          prop: 'remark',
          disabled: false,
          row: 5,
        },
      ],
      rules: {
        name: [
          { required: true, message: '请输入类型名称', trigger: 'blur' },
        ],
        value: [
          { required: true, message: '请输入类型值', trigger: 'blur' },
        ],
      },
      tableShow: false,
    })
    onMounted(() => {

    })
    const router = useRouter()
    const ruleFrom = ref()
    const tableRef = ref()
    const methods = {
      //表格数据重置
      resetting() {
        data.values = copy(values)
        tableRef.value.resettingTable(data.values)
      },
      //列表根据筛选条件搜索
      searchFor() {
        tableRef.value.handleCurrentChange(1)
      },
      screenChange(prop: string, index: number) {
        
        if(prop){
          data.values.orderItemList[0].column = prop
          data.values.orderItemList[0].asc = true
        }else{
          data.values.orderItemList[0].column = ''
          data.values.orderItemList[0].asc = false
        }
        if (prop) {
          data.tableFields[index].isOrderBy = true
        } else {
          data.tableFields[index].isOrderBy = false
        }
        tableRef.value.handleCurrentChange(1)
      },
      //关闭弹窗
      handleClose() {
        ElMessageBox.confirm(
          '当前信息将不再保存?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            ruleFrom.value.resetFields()//重置表单
            data.show = false
            data.model = copy(model)
          })
      },
      //添加字典并打开弹窗
      addDict() {
        data.addFields[1].disabled = false
        data.title = '新增字典类型'
        data.show = true
      },
      //添加字典跟修改字典保存按钮事件
      save() {
        ruleFrom.value.verification().then(() => {
          if (!data.model.id) {
            dictTypeAdd(data.model).then(() => {
              Message({ type: 'success', message: '添加成功' })
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              data.show = false//关闭弹窗
              ruleFrom.value.resetFields()//重置表单
              data.model = copy(model)//重置表单绑定数据
            })
          } else {
            dictTypeUpdate(data.model).then(() => {
              Message({ type: 'success', message: '修改成功' })
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              data.show = false//关闭弹窗
              ruleFrom.value.resetFields()//重置表单
              data.model = copy(model)//重置表单绑定数据
            })
          }
        })
      },
      // deleteOut(id:number){
      //   ElMessageBox.confirm(
      //     '是否删除当前字典?',
      //     '提示',
      //     {
      //       confirmButtonText: '确定',
      //       cancelButtonText: '取消',
      //       type: 'warning',
      //     }
      //   )
      //     .then(() => {
      //       dictTypeDel({id:id}).then((res:any)=>{
      //         Message({type:'success',message:'删除成功'})
      //         tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
      //       })
      //     })
      // },
      edit(row: any) {
        data.title = '修改字典类型'
        data.addFields[1].disabled = true
        data.model = objectMatching(row, data.model)
        data.show = true
      },
      //修改字典状态
      modifyState(id: number, status: number, val: string) {
        ElMessageBox.confirm(
          val,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            dictTypeStatus({ id: id, status: status }).then(() => {
              Message({ type: 'success', message: '操作成功' })
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
            })
          })
      },
      //跳转到字典列表
      child(parent: string) {
        router.push({ path: '/system/dictionary/child', query: { parent: parent } })
      }
    }
    return {
      ...toRefs(data),
      Search, Plus, ...methods,
      ruleFrom, tableRef
    }
  }
})
</script>
<style scoped lang='scss'>
.box {
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 10px 32px;
  margin-top: 10px;
}

.mytable {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 10px 32px;
  height: calc(100% - 125px);
}

.name {
  color: #1878FF;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
</style>
<style lang="scss">
.dictionary {
  height: calc(100% - 70px);
  overflow-y: auto;

  .el-input {
    width: 100% !important;
  }
}
</style>